<template>
    <el-drawer :title="title" :visible.sync="visible" close-on-press-escape direction="btt" size="80%">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick1">
            <el-tab-pane label="关联用户" name="first">
                <user-tab  ref="userTab" v-if="userTabVisible"></user-tab>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>
<script>
    import UserTab from './manage-tab/user-tab'
    import * as userService from '@/api/upms/user'
    
    export default {
        data() {
            return {
                title: '部门分配',
                visible: false,
                userTabVisible: false,
                userForm: {
                    pkDept: ''
                },
                tableDataList: [],
                gridData: [],
                activeName: 'first',
                multipleSelection: []
            }
        },
        components: {
            UserTab
        },
        methods: {
            init(id) {
                this.visible = true
                this.userForm.pkDept = id
                this.userTabVisible = true
                this.activeName = 'first'
                this.$nextTick(() => {
                    // 初始加载授权用户
                    this.$refs.userTab.init(this.userForm.pkDept);
                })
            },
            // 切换页签
            handleClick1(tab, event) {
                if (tab.index == '0') {
                    this.userTabVisible = true
                    this.$nextTick(() => {
                        // this.$refs.userTab.init(this.userForm.pkDept);
                    })
                }
                if (tab.index == '1') {
                    this.roleTabVisible = true
                    this.$nextTick(() => {
                        // this.$refs.roleTab.init(this.userForm.pkDept);
                    })
                }
            },
            
            
        }
    }
</script>
<style scoped>
    .drawer-header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 36px;
        line-height: 36px;
    }
</style>